<template>
	<i-drawer v-model="modelValue" :popup="false" mode="bottom" @close="onSelectCancel">
		<view class="select">
			<view class="select-action">
				<text @tap="onSelectCancel" class="cancel">取消</text>
				<text @tap="onSelectConfirm" class="confirm">确认</text>
			</view>

			<view class="select-box">
				<scroll-view scroll-y class="select-box-item">
					<view class="label" :class="[index + 1 === currentItem.id ? 'active' : '']" v-for="(item, index) in list" :key="item.id" @tap="onClickListItem(item)">
						<text>{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</i-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const props = defineProps({
	value: {
		type: Boolean,
		default: false
	},
	list: {
		type: Array,
		default() {
			return []
		}
	}
})

const modelValue = ref(props.value)

watch(
	() => props.value,
	nVal => {
		modelValue.value = nVal
	}
)

const currentItem = ref({})

const onSelectCancel = () => {
	emit('update:modelValue', false)
	emit('cancel', {})
}

const onSelectConfirm = () => {
	emit('update:modelValue', false)
	emit('confirm', currentItem.value)
}

const onClickListItem = item => {
	currentItem.value = item
}
</script>

<style lang="scss" scoped>
.select {
	&-action {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		font-size: 30rpx;
		position: relative;

		&::before,
		&::after {
			content: ' ';
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid $u-border-color;
			transform-origin: 0 100%;
			transform: scaleY(0.5);
		}

		&::after {
			top: 0;
			border-top: 1px solid $u-border-color;
			transform-origin: 0 0;
		}

		.cancel {
			color: $u-tips-color;
		}

		.confirm {
			color: $u-primary;
		}
	}

	&-box {
		padding: 20rpx 0;

		&-item {
			padding: 0 20rpx;
			height: 400rpx;

			.label {
				font-size: 26rpx;
				padding-top: 30rpx;
				padding-right: 30rpx;

				&.active {
					font-size: 28rpx;
					color: $u-primary;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						right: 0;
						top: 65%;
						transform: translateY(-35%) rotate(-45deg);
						width: 20rpx;
						height: 10rpx;
						border-left-width: 4rpx;
						border-bottom-width: 4rpx;
						border-left-style: solid;
						border-bottom-style: solid;
						border-left-color: $u-primary;
						border-bottom-color: $u-primary;
					}
				}
			}
		}
	}
}
</style>
